<template>
  <div class= 'schedule-main'>
    <div class='schedule-timeRange'>
      {{ scheduleInfo.timeRange }}
    </div>
    <div class='schedule-count'>
        剩余:{{ scheduleInfo.count }}
    </div>
    <div class='schedule-buton'>
      <button  class='butAppt' :disabled=disableFlag @click='alertAppt'>可预约</button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        
      }
    },
    props:{
      scheduleInfo: {
        timeRange: '08:00-09:00',
        count: 2,
        scheduleId: '0',
        apptCost: '7.00'
      }
    },
    computed:{
      // 能否预约的标识
      disableFlag () {
        if(this.scheduleInfo.count > 0){
          return false
        } else {
          return true
        }
      }
    },
    methods:{
      
    }

  }
</script>

<style scoped>
.schedule-main {
  margin: 0px;
  padding: 5px;
  overflow: hidden;
  background-color: white;
}
.schedule-timeRange{
  float:left;
  margin:0;
  text-align: left;
  width: 33%;
}    
.schedule-count{
  float:left;
  margin:0;
  text-align: center;
  width: 33%;
}   
.schedule-button{
  float:right;
  margin:0;
  text-align: left;
  width: 33%;
}   
button{
  border-radius: 10%;
  background-color: green;
  color: white;
}
</style>